<template>
  <div ref="panel" :style="style"></div>
</template>

<script>
/* eslint-disable */
import QRCode from 'qrcodejs2';

/**
 * 二维码组件
 */
export default {
    name: "SeaQrCode",
    props: {
        // 宽度
        width: {type: Number, default: 200},
        // 高度
        height: {type: Number, default: 200},
        // 文本内容
        text: {type: String, default: 200},
    }, data() {
        return {
            // 居中显示在父级容器中
            style: `height: ${this.height}px; width: ${this.width}px;text-align: center;margin:auto;`
        }
    }, mounted() {
        this.$refs.panel.innerHTML = '';
        new QRCode(this.$refs.panel, {
            text: this.text,
            width: this.width,
            height: this.height,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });
    }
}
</script>
